<template>
	<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value"
		mode="multiSelector">
		<slot></slot>
	</picker>
</template>

<script>
	import api from '@/service/config/api.js'
	// const AllAddress = require('../json/area.json')
	let selectVal = ['', '', '']

	export default {
		props: {
			site: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				value: [0, 0, 0],
				array: [],
				index: 0,
				AllAddress: [],
			}
		},
		watch: {
			site(newVal) {
				if(newVal) {
					this.getValue(newVal);
				}
				console.log('newVal',newVal)
			},
		},
		created() {
			this.getAddress()
		},
		methods: {
			getAddress() {
				if(this.$storage.getItem('addressTree')) {
					this.AllAddress = this.$storage.getItem('addressTree')
					this.initSelect()
					return
				}
				this.$utils.loading()
				api.get('/base/tSystemCity/tree').then(res=>{
					this.AllAddress = res.data;
					this.$storage.setItem('addressTree',res.data)
					this.initSelect()
				})
			},
			getValue(newVal) {
				const arr = newVal.split(' ');
				const index = this.AllAddress.findIndex(item=>item.name == arr[0])
				const index1 = this.AllAddress[index].children.findIndex(item=>item.name == arr[1])
				const index2 = this.AllAddress[index].children[index1].children.findIndex(item=>item.name == arr[2])
				// this.columnselfchange([index,index1,index2],arr)
				this.value = [index,index1,index2];
				this.array[0] = this.AllAddress.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[1] = this.AllAddress[this.value[0]].children.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[2] = this.AllAddress[this.value[0]].children[this.value[1]].children.map(obj => {
					return {
						name: obj.name
					}
				})
				selectVal = arr;
				this.$forceUpdate();
				this.$emit('change', {
					index: this.value,
					data: arr
				})
			},
			// 初始化地址选项
			initSelect() {
				this.updateSourceDate() // 更新源数据
					.updateAddressDate() // 更新结果数据
					.$forceUpdate() // 触发双向绑定
			},
			// 地址控件改变控件
			columnchange(d) {
				this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
					.updateSourceDate() // 更新源数据
					.updateAddressDate() // 更新结果数据
					.$forceUpdate() // 触发双向绑定
			},
			// 手动更新控件
			columnselfchange(columns,values) {
				this.updateSelectIndex(columns[0], values[0]) // 更新选择索引
					.updateSourceDate() // 更新源数据
					.updateAddressDate() // 更新结果数据
				.updateSelectIndex(columns[1], values[1]) // 更新选择索引
					.updateSourceDate() // 更新源数据
					.updateAddressDate() // 更新结果数据
				// .updateSelectIndex(columns[2], values[2]) // 更新选择索引
				// 	.updateSourceDate() // 更新源数据
				// 	.updateAddressDate() // 更新结果数据
				// 	.$forceUpdate() // 触发双向绑定
			},

			/**
			 * 更新源数据
			 * */
			updateSourceDate() {
				this.array = []
				this.array[0] = this.AllAddress.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[1] = this.AllAddress[this.value[0]].children.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[2] = this.AllAddress[this.value[0]].children[this.value[1]].children.map(obj => {
					return {
						name: obj.name
					}
				})
				return this
			},

			/**
			 * 更新索引
			 * */
			updateSelectIndex(column, value) {
				let arr = JSON.parse(JSON.stringify(this.value))
				arr[column] = value
				if (column === 0) {
					arr[1] = 0
					arr[2] = 0
				}
				if (column === 1) {
					arr[2] = 0
				}
				this.value = arr
				return this
			},

			/**
			 * 更新结果数据 
			 * */
			updateAddressDate() {
				selectVal[0] = this.array[0][this.value[0]].name
				selectVal[1] = this.array[1][this.value[1]].name
				selectVal[2] = this.array[2][this.value[2]].name
				return this
			},

			/**
			 * 点击确定
			 * */
			bindPickerChange(e) {
				this.$emit('change', {
					city: this.AllAddress[this.value[0]].children[this.value[1]].children[this.value[2]],
					data: selectVal
				})
				return this
			}

		}
	}
</script>

<style>
</style>
